<template>
	<div class="MyMessage">
		<div class="title"> 加入班级申请 </div>
		<div class="table apply">
			<el-table :data="applyList" style="width: 100%" v-loading="loading">
				<el-table-column label="申请人id" width="140">
					<template slot-scope="scope">U{{scope.row.studentId}} </template>
				</el-table-column>
				<el-table-column prop="studentName" label="申请人"> </el-table-column>
				<el-table-column prop="applyDate" label="申请日期" width="184"> </el-table-column>
				<el-table-column label="班级id" width="140">
					<template slot-scope="scope">C{{scope.row.classesId}} </template>
				</el-table-column>
				<el-table-column prop="classesName" label="班级名称"> </el-table-column>
				<el-table-column prop="operate" label="操作" width="200">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="approval(scope.row.id,1)" plain>同意</el-button>
						<el-button type="danger" size="small" @click="approval(scope.row.id,2)" plain>拒绝</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page">
			<el-pagination background layout="total, prev, pager, next,jumper" @current-change="currentChange" :total="total"
			 :page-size="pageSize" />
		</div>
	</div>
</template>
<script>
	import axios from '@/utils/axiosutils.js';
	export default {
		name: "MyMessage",
		components: {},
		data() {
			return {
				applyList: [],
				//分页
				currentPage: 1,
				pageSize: 10,
				total: null,
				loading: false,
			};
		},
		created() {
			this.getApplyList();
		},
		methods: {
			//
			getApplyList() {
				this.loading = true;
				let params = {
					pageSize: this.pageSize,
					currentPage: this.currentPage,
				};
				setTimeout(() => {
					axios.get("approval/list", resp => {
						this.applyList = resp.obj.content;
						this.total = resp.obj.total;
						this.loading = false;
					},params)
				}, 500);
			},
			approval(id, status) {
				let params = {
					approvalId: id,
					status
				};
				axios.get("approval/approvals", resp => {
					if (status === 1) this.$message.success('同意申请完成');
					if (status === 2) this.$message.success('已拒绝');
					this.getApplyList();
				}, params)
			},
			// 获取消息列表
			getMessage() {},
			// 切换分页时触发
			currentChange(val) {
				this.currentPage = val
				this.getApplyList()
			},
		},
	};
</script>
<style lang="less" scoped>
	.MyMessage {
		padding: 24px;

		.title {
			width: 120px;
			background: #fafafa;
			margin-bottom: 12px;
			padding: 12px;
			text-align: center;
		}
	}
</style>
